<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>底部导航</title>
		<link rel="stylesheet" href="css/mui.min.css"/>
		<link rel="stylesheet" href="libs/iconfont/fonts/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="css/main.css"/>			
		<style>
			.mui-bar-tab .mui-tab-item.mui-active {color: #2875f5;}
			.mui-icon .mui-badge{top: -5px;}  
	    	.mui-bar-tab .mui-tab-item{color: #AAAAAA;}	    
	    	.mui-bar{background: white;}		    		
		</style>
	</head>	
	<body>
		<!--底部导航-->
		<nav class="navtab mui-bar mui-bar-tab chamber-commerce-nav mui-blues">
		    <a class="mui-tab-item personal mui-active"  href="view/Home.html">
		        <i class="mui-icon iconfont">&#xe608;</i>
		        <span class="mui-tab-label">首页</span> 
		    </a>
		     <a class="mui-tab-item personals" href="view/Friends_circle.html">
		    	<i class="mui-icon iconfont">&#xe60e;</i>
		        <span class="mui-tab-label">友圈</span> 
		    </a>	   
		     <a class="mui-tab-item personal" href="view/Personal.html">
		        <i class="mui-icon iconfont">&#xe61d;</i>
		        <span class="mui-tab-label">个人中心</span>	        
		    </a>
		</nav>
	</body>	 
	<script src="js/mui.min.js"></script>
	<script type="text/javascript" src="js/function.js"></script>
	<script type="text/javascript" src="js/open.js"></script>	
	<script type="text/javascript" src="libs/jquery/jquery.js"></script>
	<script type="text/javascript" src="js/web_js/public.js"></script>
	<script type="text/javascript" charset="UTF-8">
    //mui初始化
	mui.init();  
	/*meMenu=1;*/
	var subpages = ['view/Home.html','view/Friends_circle.html','view/Personal.html'];
	var subpage_style = {
		top: '46px',
		bottom: '51px',
		scrollIndicator: 'none',
		bounce: 'vertical',
	};
	var aniShow = {};
	 //创建子页面，首个选项卡页面显示，其它均隐藏；
	mui.plusReady(function() {
		var self = plus.webview.currentWebview();
		for (var i = 0; i < 3; i++) {
			var temp = {};
			if(i>=0){
			subpage_style.top = "0";
			}
			var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
			if (i > 0) {
				sub.hide();
			} else {
				temp[subpages[i]] = "true";
				mui.extend(aniShow, temp);
			}
			self.append(sub);
		}
	});
	 //当前激活选项
	var activeTab = subpages[0];
	var title = document.getElementById("title");
	 //选项卡点击事件
	mui('.mui-bar-tab').on('tap', 'a', function(e) {
		var targetTab = this.getAttribute('href');
		if (targetTab == activeTab) {
			return;
		}
		//更换标题
		//显示目标选项卡
		if (mui.os.ios || aniShow[targetTab]) {
			plus.webview.show(targetTab);
		} else {
			var temp = {};
			temp[targetTab] = "true";
			mui.extend(aniShow, temp);
			plus.webview.show(targetTab, "fade-in", 300);
		}
		//隐藏当前;
		plus.webview.hide(activeTab);
		//更改当前活跃的选项卡
		activeTab = targetTab;			
	});	
	var first = null;
	mui.back = function() {
		//首次按键，提示‘再按一次退出应用’
		if (!first) {
			first = new Date().getTime();
			mui.toast('再按一次退出应用');
			setTimeout(function() {
				first = null;
			}, 2000);
		} else {
			if (new Date().getTime() - first < 2000) {
				plus.runtime.quit();
			}
		}
	};
	</script>
</html>
